<template>
  <div class="loginMain" id="login">
    <!-- back img -->
    <!--<div class="login-back">-->
      <!--<div class="login-text login-center">-->
        <!--<img src="~static/imgs/login_003.png" alt="" title=""/>-->
      <!--</div>-->
      <!--<div class="login-img login-center">-->
        <!--<img src="~static/imgs/login_002.png" alt="" title=""/>-->
      <!--</div>-->
    <!--</div>-->
    <!-- login input -->
    <div class="logo-img">
      <img src="static/imgs/852466073970663868.jpg" alt="">
    </div>
    <div class="login-form">
      <div class="login-form-ul">
        <ul>
          <li class="login-user">
            <i><img src="~static/imgs/login_img2.png" alt="" title="用户名"/></i>
            <input type="text" style="display:none">
            <input type="text" class="login-user" placeholder="用户名/手机号" v-on:keyup="keyVue()" v-model="mobile"  autocomplete="off"/>
            <span class="close" id="close" v-on:click="closeVal(this)" v-show="Close"><img
              src="~static/imgs/chacha.png" alt="" title="close"/></span>
          </li>
          <li>
            <i><img src="~static/imgs/login_img3.png" alt="" title="密码"/></i>
            <input style="display:none">
            <input type="password" class="login-pwd" v-model="password" placeholder="密码"  autocomplete="off"/>
            <router-link :to="{name:'restPassword'}">
              <span>忘记密码</span>
            </router-link>
          </li>
          <li id="login-code" flex="main:justify cross:center">
            <input type="text" class="login-pwd" v-model="randomcode" placeholder="验证码"  autocomplete="off"/>
            <img :src="code" @click="changeCode" alt="">
          </li>
        </ul>
      </div>
      <!-- clear -->
      <div class="clear"></div>
      <!-- btn -->
      <div class="login-btn" @click="login">
        登录
      </div>
      <!-- register -->
      <div class="login-register">
        <div class="login-register-text">
          <a>还没有注册账号?</a>
          <a v-on:click="goRegister()">点击立即注册</a>
        </div>
      </div>
    </div>
    <!-- 遮罩 -->
    <div class="login-shade" v-show="Boole">
      <div class="shade-box">
        <ul>
          <li v-for="(item,index) in liList" v-on:click="Go(index)">
            <a>{{item.name}}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {userService} from '#/service'
  import { Toast } from 'mint-ui';
  import {mapActions} from 'vuex'
  import base from '../mixins/base'
  export default {
    name: "Login",
    data() {
      return {
        Boole: false,
        mobile: '',
        password: "",
        randomcode:"",
        code:this.domain(),
        Close: false,
        liList: [
          {
            name: '有邀请人',
            id: 0
          },
          {
            name: '没有邀请人',
            id: 1
          },
          {
            name: '取消',
            id: 2
          },
        ],
        result:{},
        rules:{
          mobile:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'用户名不能为空！'
              },
            ] ,
            value:'',
            join:'and'
          },
          randomcode:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'验证码不能为空！'
              },
            ] ,
            value:'',
            join:'and'
          },
          password:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'密码不能为空！'
              },

              {
                type:'inFun',
                rule:'maxLength(40)',
                msg:'最大长度不能超过40个字符'
              },
            ] ,
            value:'',
            join:'and'
          },
        },
        redirect:''
      }
    },
    created(){

      this.redirect=this.$route.query.redirect||'index'
    },
    methods: {
      ...mapActions([
        'saveUserInfo'
      ]),
      changeCode(){
        this.code=`${this.domain()}?newData=${new Date().getTime()}`
      },
      async login(){
        this.$nextTick(async ()=>{
          this.result=this.$valiForm.form(this.rules)
          if(this.result.mobile){
            Toast({
              message: this.result.mobile.msg,
              position: 'middle',
              duration: 2000
            });
            return
          }
          if(this.result.password){
            Toast({
              message: this.result.password.msg,
              position: 'middle',
              duration: 2000
            });
            return
          }
          if(this.result.randomcode){
            Toast({
              message: this.result.randomcode.msg,
              position: 'middle',
              duration: 2000
            });
            return
          }
          let data=await userService.login({
            data:{
              mobile:this.mobile,
              password:this.password,
              randomcode:this.randomcode
            }
          })
          if(data.data){
            this.saveUserInfo(data.data);
            this.$router.push({
              name:this.redirect
            })
          }
        })
      },
      keyVue: function () {

        if (this.mobile.length > 0) {
          this.Close = true;
        } else {
          this.Close = false;
        }
      },
      closeVal: function () {
        if (this.mobile != '') {
          this.mobile = '';
          this.Close = false;
        }
      },
      goRegister: function () {
        this.Boole = !this.Boole
      },
      GoUrl: function (Code) {
        this.$router.push({
          path: '/register',
          name: 'register',
          query: {
            name: 'register',
            dataObj: Code
          }
        })
      },
      Go: function (el) {
        switch (el) {
          case 0:
            //yes
            this.GoUrl(el);
            break;
          case 1:
            //no
            this.GoUrl(el);
            break;
          case 2:
            //close
            this.goRegister();
            break;
          default:
        }
      }
    },
    watch:{
      mobile:{
        immediate:true,
        handler(newVal){
          this.rules.mobile.value=newVal
        },
      },
      randomcode:{
        immediate:true,
        handler(newVal){
          this.rules.randomcode.value=newVal
        },
      },
      password:{
        immediate:true,
        handler(newVal){
          this.rules.password.value=newVal
        },
      }
    },
    mixins:[base]
  }
</script>

<style>
  .logo-img{
    width: 100%;
  }
  .logo-img img{
    width: 100%;
  }
  .login-user{
    border-bottom: none !important;
  }
  #login-code{
    border: none;
  }
  #login-code input{
    height: 0.3rem;
    padding: 0.1rem;
    margin-left: 0;
    border: 1px solid #ddd;
  }
  #login-code img{
    width: 95px;
    height: 25px;
  }
  html,
  body {
    font-size: 26.666666666667vw;
    background: #fff;
  }

  * {
    margin: 0;
    padding: 0;
  }

  img {
    border: none;
  }

  ul,
  li {
    list-style: none;
  }

  a {
    text-decoration: none;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .clear {
    clear: both;
  }

  .loginMain {
    width: 100%;
    height: 100%;
    background: white;
  }
  #login{
    padding-top: 0 !important;
  }
  .login-back {
    width: 100%;
    height: 2.1rem;
    float: left;
    background: url(~static/imgs/login_001.png) no-repeat center/100%;
  }

  .login-center {
    text-align: center;
  }

  .login-center img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .login-text {
    width: 1.75rem;
    margin: 0.6rem auto 0 auto;
  }

  .login-img {
    width: 1.02rem;
    margin: 0.32rem auto 0 auto;
  }

  .login-form {
    width: 100%;
    float: left;
    margin-top: 0.4rem;
    height: auto;
  }

  .login-form-ul {
    width: 90%;
    margin: 0 auto;
  }

  .login-form-ul ul li {
    width: 100%;
    height: 0.5rem;
    float: left;
    position: relative;
    border: 1px solid #ddd;
  }

  .login-form-ul ul li:last-child {
    border-top: none
  }

  .login-form-ul ul li i {
    display: inline-block;
    width: 0.24rem;
    height: 0.27rem;
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
  }

  .login-form-ul ul li i img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .login-form-ul ul li input {
    width: 2.32rem;
    height: 0.4rem;
    float: left;
    border: none;
    background: none;
    outline: none;
    font-size: 0.12rem;
    margin: 0.05rem 0rem 0.05rem 0.5rem;
  }

  .login-form-ul ul li .close {
    width: 0.12rem;
    height: 0.12rem;
    display: block;
    position: absolute;
    top: 0.2rem;
    right: 0.1rem;
  }

  .login-form-ul ul li .close img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .login-form-ul ul li a span {
    position: absolute;
    right: 0.05rem;
    top: 0;
    font-size: 0.12rem;
    color: #5e99ff;
    line-height: 0.5rem;
  }

  .login-btn {
    margin: 0.2rem auto 0.2rem auto;
    width: 90%;
    height: 0.4rem;
    line-height: 0.4rem;
    background: rgb(142,10,190);
    color: white;
    border-radius: 0.05rem;
    font-size: 0.12rem;
    text-align: center;
  }

  .login-register {
    width: 100%;
    height: auto;
  }

  .login-register-text {
    width: 55%;
    margin: 0 auto;
    overflow: hidden;
  }

  .login-register a {
    display: inline-block;
    float: left;
    font-size: 0.12rem;
    color: #777;
  }

  .login-register a:last-child {
    color: #5e99ff;
    margin-left: 0.05rem;
  }

  .login-shade {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 19930718;
    background: rgba(0, 0, 0, 0.6);
  }

  .shade-box {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 90%;
    margin-left: -45%;
    height: 1.25rem;
    background: white;
    border-radius: 0.05rem;
  }

  .shade-box ul li {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    float: left;
    border-bottom: 0.01rem solid #eee;
  }

  .shade-box ul li:last-child {
    border-bottom: none;
  }

  .shade-box ul li a {
    text-align: center;
    color: #4097ff;
    font-size: 0.16rem;
    display: block;
  }

  .shade-box ul li:last-child a {
    color: red;
  }
</style>
